import React from 'react';
import {connect} from 'react-redux';
import {
  Button, Form, Switch, Icon, message
} from 'antd';
import 'styles/setting/user-agreement/user-agreement.scss';
import UAService from 'containers/setting/user-agreement/user-agreement.service';
import 'braft-editor/dist/braft.css';
import {LanguageInput} from 'components/index';
import {messages} from "share/common";
import TitleAndContentI18n from "components/template/title-and-content-i18n/title-and-content-i18n";
const FormItem = Form.Item;
const defaultContent = [
  {"language": "en", "value": null},
  {"language": "zh_cn", "value": null},
  {"language": "ja", "value": null}
]
class UserAgreement extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      agreement: {
        title: "",
        enabled: false,
        tenantOnly: true,
        content: "",
        i18n: {
          title: [],
          //content的多语言特殊处理
          content: defaultContent
        }
      }

    };
  }

  componentDidMount() {
    this.getUserAgreement();
  }

  //查询
  getUserAgreement = () => {
    UAService.getUserAgreementByTenantId()
      .then((res) => {
        let data = res.data;
        if (data) {
          let agreement = data;
          if (
            agreement.i18n.content === null ||
            agreement.i18n.content === undefined ||
            agreement.i18n.content.length < 2
          ) {
            agreement.i18n.content = defaultContent;
          }
          this.setState({
            agreement,
          })
        }
      })
      .catch((err) => {
      })
  }

  //更新或者新增
  updateUserAgreement = (data) => {
    this.setState({
      loading: true
    })
    UAService.updateUserAgreement(data)
      .then((res) => {
        message.success(messages('common.operate.success'));//操作成功
        this.getUserAgreement();
        this.setState({
          loading: false
        })
      })
      .catch((err) => {
        this.setState({
          loading: false
        })
      })
  }

  //状态切换
  handleStatusChange = (e) => {
    let agreement = this.state.agreement;
    agreement.enabled = e;
    this.setState({
      agreement
    })
  };


  //提交
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let agreement = this.state.agreement;
        agreement.enabled = values.enabled;
        agreement.tenantOnly = values.tenantOnly;
        this.updateUserAgreement(agreement);
      }
    });
  }
  handleCancel = () => {
    this.context.router.goBack();
  }

  onI18nChange = (i18n, obj) => {
    let agreement = this.state.agreement;
    agreement.i18n.content = i18n.content;
    agreement.i18n.title = i18n.title;
    agreement.title = obj.title;
    agreement.content = obj.content;
    this.setState({
      agreement
    })
  };
  render() {
    const {loading, agreement} = this.state;
    const {getFieldDecorator} = this.props.form;
    let i18n = agreement.i18n;

    return (
      <div className="user-agreement-wrap">
        <Form className="form-container">
          <FormItem
            label={messages('setting.key1208'/*启用状态*/)}//启用状态
            colon={true}>
            {getFieldDecorator('enabled', {
              initialValue: agreement.enabled,
              rules: []
            })(
              <div>
                <Switch checked={agreement.enabled}
                        checkedChildren={<Icon type="check"/>}
                        unCheckedChildren={<Icon type="cross"/>}
                        onChange={this.handleStatusChange}/>
                <span className="enabled-type" style={{
                  marginLeft: 20,
                  width: 100
                }}>{agreement.enabled ? messages("common.status.enable") : messages("common.disabled")}</span>
              </div>
            )
            }
          </FormItem>

          <FormItem
            label={messages('setting.key2205')/*标题与内容*/}
            colon={true}>
            <TitleAndContentI18n i18n={i18n}
                                 onI18nChange={this.onI18nChange}/>
          </FormItem>

          <div className="btn">

            <Button type="primary"
                    loading={loading}
                    onClick={this.handleSubmit}>
              {/*保存*/}
              {messages('common.save')}
            </Button>
            &nbsp;&nbsp;&nbsp;
            <Button onClick={this.handleCancel}
                    className="cancel-btn">
              {/*返回*/}
              {messages('common.back')}
            </Button>

          </div>

        </Form>
      </div>
    )
  }
}

UserAgreement.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language,
    tenantMode: state.main.tenantMode,
    company: state.login.company
  }
}

const WrappedUserAgreement = Form.create()(UserAgreement);

export default connect(mapStateToProps)(WrappedUserAgreement);
